<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>china history</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 <link rel="stylesheet" href="https://at.alicdn.com/t/font_3352173_7m2uv72ag24.css">
  <style>
  * {
    margin: 0px;
    padding: 0px;
    list-style: none;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  }

  .h2 {
    font-size: 20px;
    font-weight: bold;
    color: #222;
  }

  body, #app {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: radial-gradient(#fff 10%, #d0d0d0);
  }

  .author {
    opacity: .02;
    position: absolute;
    left: 0%;
    top: 50%;
    white-space: nowrap;
    transform: translate(-0%, -50%);
    font-size: 60vw;
    animation: move 180s infinite linear;
  }

  @keyframes move {
    0% {
      transform: translate(-0%, -50%);
    }
    50% {
      transform: translate(-50%, -50%);
    }
    100% {
      transform: translate(-0%, -50%);
    }

  }


  .history {
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-end;
  }

  .history .line {
    position: absolute;
    height: 2px;
    background: #ddd;
    width: 100%;
    left: 0;
    top: 50%;
  }

  .history ul {
    display: flex;
    padding-bottom: calc(50vh - 47px);
  }

  /*.history li:first-child {*/
  /*  margin-left: 84px;*/
  /*}*/

  /*.history li:last-child {*/
  /*  margin-right: 84px;*/
  /*}*/

  .history li {
    width: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:flex-end;
    color: #888;
    cursor: pointer;
    position: relative;
    transition: all .4s;
    z-index: 1;
    pointer-events: none;
  }

  .history li:hover {
    color: #60c1ff;
    transform: scale(1.1);
    z-index: 2;
  }

  .history li:hover .dot span {
    background: #60c1ff;
  }

  .history li.his:hover .dot {
    background: #60c1ff;
  }


  .history li:hover .ms {
    display: block;
  }

  .history li .time {
    font-size: 12px;
    text-align: center;
    word-wrap: break-word;
  }


  .history li .dot {
    position: relative;
    display: flex;
    margin-top: 5px;
    margin-bottom: 10px;
  }

  .history li i {
    position: relative;
    z-index: 2;
  }


  .history li.lv1 .name {
    font-size: 34px;
    width: 34px;
    line-height: 34px;
    color: #00a8f2;
  }

  .history li.lv2 .name {
    font-size: 20px;
    width: 20px;
    line-height: 20px;
    color: #00a8f2;
  }

  .history li.lv3 .name {
    font-size: 16px;
    width: 16px;
    line-height: 16px;
    color: #00a8f2;
  }

  .history li.lv1 .dot {
    padding-top: 100px;
  }

  .history li.lv2 .dot {
    padding-top: 76px;
  }

  .history li.lv3 .dot {
    padding-top: 42px;
  }

  .history li.lv1 .dot i {
    font-size: 24px;
  }

  .history li.lv2 .dot i {
    font-size: 18px;
  }

  .history li.lv3 .dot i {
    font-size: 12px;
  }


  .history li.his {
    /*width: 20px;*/
    /*height: 92px;*/
    font-size: 12px;
    pointer-events: inherit;
  }

  .history li.his .name {
    width: 12px;
  }


  .history li.his .dot {
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background: #ccc;
    margin: 12px 0 12px;
    transition: all .4s;
  }

  .history li.his .dot span {
    bottom: 8px;
    display: none;
  }

  .history li.hot {
    color: #60c1ff;
    z-index: 2;
  }

  .history li.hot .dot {
    background: #60c1ff;
  }


  .history li .dot span {
    width: 1px;
    height: 100%;
    background: #ccc;
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
  }

  .history li .ms {
    font-size: 12px;
    color: #888;
    position: absolute;
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    border-radius: 12px;
    bottom: 65px;
    padding: 15px;
    z-index: 2;
    width: 210px;
    color: #444;
    display: none;
    line-height: 20px;
  }

  .history li .ms i {
    font-style: normal;
    color: #999;
  }

  .history li .ms:before {
    position: absolute;
    content: '';
    border-width: 8px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    bottom: -15px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2));
    left: 50%;
    margin-left: -8px;
  }

  .win {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .win .mark {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    background: rgba(0, 0, 0, .6);
  }

  .win .kuang {
    width: 720px;
    background: #fff;
    box-shadow: 0 0 13px rgba(0, 0, 0, .2);
    position: relative;
    z-index: 2;
    border-radius: 15px;
  }

  .win .kuang .ms {
    padding: 25px;
    line-height: 24px;
    color: #555;
    max-height: 550px;
    overflow-y: auto;
  }

  .win .kuang .ms .jc {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    background: #f8f8f8;
    margin-bottom: 15px;
  }

  .win .kuang .ms .jc li {
    width: 50%;
    line-height: 34px;
  }

  .win .kuang .ms .jc li i {
    color: #aaa;
    font-style: normal;
  }

  .win .kuang .ms p {
    margin-bottom: 15px;
  }

  .win .kuang .ms p a, .win .kuang .ms  b, .win .kuang .ms  strong {
    color: #60c1ff;
    text-decoration: none;
  }

  .win .kuang .title {
    font-size: 34px;
    text-align: center;
    padding: 20px 0 20px;
    border-bottom: solid 1px #ddd;
    position: relative;
  }

  .win .kuang .title i {
    cursor: pointer;
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    right: -20px;
    background: #333;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -20px;
  }

  .st-enter-active, .st-leave-active {
    transition: all .6s;
  }

  .st-enter, .st-leave-to {
    opacity: 0;
  }

  .st-enter-to, .st-leave {
    opacity: 1;
  }

  @media screen and (max-width: 768px) {
    .win .kuang {
      width: 90%;
    }
  }


  </style>
</head>

<body>
<div id="app">
  <div class="author">china history</div>
  <transition name="st">
    <div class="win" v-if="show">
      <div class="mark"></div>
      <div class="kuang">
        <div class="title">{{nr.title}}<i class="icon-close iconfont" @mousedown.stop="show=false"
                                          @touchstart.stop="show=false"></i></div>
        <div class="ms" v-html="nr.ms"></div>
      </div>
    </div>
  </transition>
  <div @mousedown.prevent="mousedown" @mouseup="mouseup" @touchstart.prevent="touchstart" @touchend="touchend"
       class="history" :style="'width:'+width+'px;transform:translateX('+(movepos)+'px)'">
    <div class="line"></div>
    <ul ref="ul">
      <li></li>
      <li v-for="item in history"
          :class="{lv1:item.level===1,lv2:item.level===2,lv3:item.level===3,his:item.level==='history',hot:item.tj}"
          @mousedown.stop="tan(item)" @touchstart.stop="tan(item)">
        <div class="name" v-if="item.name">{{item.name}}</div>
        <div class="dot" v-if="item.level==='history'"><span></span></div>
        <div class="dot" v-else><i class="iconfont icon-dingwei"></i><span></span></div>
        <div class="time" v-html="item.time"></div>
      </li>
      <li></li>
    </ul>
  </div>
</div>

<script src="history.js" type="text/javascript"></script>
<script src="vue.min.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
    el: '#app',
    data: {
        history: history,
        movepos: localStorage.getItem('curpos') ? parseInt(localStorage.getItem('curpos')) : 0,
        show: false,
        isDown: false,
        which: '',//是移动端还是PC端
        str: null,//向右定时器
        stl: null,//向左定时器
        width: 0,//总的宽度
        maxx: 0,
        mid: window.innerWidth / 2,
        nr: {
            title: '',
            ms: ''
        }
    },
    mounted() {
        this.width = this.$refs.ul.scrollWidth
        this.maxx = this.width - window.innerWidth
        window.addEventListener('resize', (e) => {
            this.mid = e.target.innerWidth / 2
        })
        document.addEventListener('keyup', (e) => {
            if (e.code === 'Escape') {
                this.show = false
            }
        })

    },
    computed: {},
    watch: {
        isDown: {
            immediate: true,
            handler(value) {
                if (value) {
                    if (this.which === 'pc') {
                        if (event.clientX - this.mid > 0) {
                            this.str = setInterval(() => {
                                this.movepos -= 2
                            }, 10)
                        } else if (event.clientX - this.mid < 0) {
                            if (this.movepos >= 0) {
                                clearInterval(this.stl)
                            } else {
                                this.stl = setInterval(() => {
                                    this.movepos += 2
                                }, 10)
                            }
                        }
                    } else if (this.which === 'mobile') {
                        if (event.touches[0].clientX - this.mid > 0) {
                            this.str = setInterval(() => {
                                this.movepos -= 2
                            }, 10)
                        } else if (event.touches[0].clientX - this.mid < 0) {
                            if (this.movepos >= 0) {
                                clearInterval(this.stl)
                            } else {
                                this.stl = setInterval(() => {
                                    this.movepos += 2
                                }, 10)
                            }
                        }
                    }

                } else {
                    clearInterval(this.str)
                    clearInterval(this.stl)
                    //let curpos=parseInt(this.curpos)+this.movepos
                    //this.curpos=curpos
                    localStorage.setItem('curpos', this.movepos)
                    //this.movepos=0

                }
            }
        },
        movepos: {
            immediate: true,
            handler(value) {
                this.$nextTick(() => {
                    if (value > 0) {
                        this.movepos = 0
                        clearInterval(this.stl)
                    } else if (value < -this.maxx) {
                        this.movepos = -this.maxx
                        clearInterval(this.str)
                    } else {
                        this.movepos = this.movepos
                    }
                })
            }
        },
        mid: {
            immediate: true,
            handler(value) {
                this.$nextTick(() => {
                    this.maxx = this.width - 2 * value
                })
            }
        },
    },
    methods: {
        tan(item) {
            this.nr.title = item.title
            this.nr.ms = item.ms
            this.show = true
        },
        mousedown() {
            this.which = 'pc'
            this.isDown = true
        },
        mouseup() {
            this.isDown = false
        },
        touchstart() {
            this.which = 'mobile'
            this.isDown = true
        },
        touchend() {
            this.isDown = false
        }
    }
})
</script>
</body>
</html>
